<script setup lang="ts">
import { ref } from 'vue'
</script>

<template>
  <view class="grab_quotas">
    <view class="header-wrapper">
      <my-header navText="每日抢配额"></my-header>
    </view>
    <view class="container">
        <view class="desc">
          <view class="title">限量发放 <text class="quota-amount">550比特</text>配额</view>
          <view class="sub-title">每日<text class="time">9</text>点抢完为止</view>
          <view class="sub-desc">每人每天最多可领取<text class="num">9</text>个真机配额</view>
        </view>
        <view class="grab-now">
          <image class="img" src="https://images-cloud.qboson.com/miniProgram/grab-now-new.png" />
        </view>
        <view class="log-container">
          <view class="log">
            <view class="log-header">获取纪录</view>
            <view class="log-body">
              <view class="header">
                <text>获取日期</text>
                <text>获取配额 (总计23个)</text>
              </view>
              <view class="items">
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <view class="item">
                  <text>2024.12.10</text>
                  <text>23</text>
                </view>
                <text class="bottom-text">已经到底了</text>
              </view>
            </view>
          </view>
        </view>
        <view class="rules">
          <text>活动规则：</text>
          <text>每天根据550比特量子计算机计算资源，等比例释放相应配额！</text>
          <text>每人每天最多可领取1个真机配额！</text>
          <text>每天9点开抢！</text>
        </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.grab_quotas{
  height: 1038px;
  overflow: auto;
  position: relative;
  @mixin back {
    background-image: url('https://images-cloud.qboson.com/miniProgram/550-qiang.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: scroll;  /* 背景随内容滚动 */
  }
  @include back;
  
  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    @include back;
  }
  .container {
    // height: calc(100vh + 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .desc {
      width: 90%;
      padding-top: 120px;
      .title, .sub-title {
        font-family: 'PuHuiTi';
        font-size: 32px;
        font-weight: 900;
        line-height: 100%;
        text-align: center;
        transform: skewX(-8deg);
        letter-spacing: -1px;
        color: rgba(0, 0, 0, 0.9);
        .quota-amount {
          padding-right: 3px;
          background: linear-gradient(285deg, #00D5FF 0%, #2A65FF 22%, #266FFF 77%, #00D5FF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-emphasis-color: transparent;
        }
      }
      .sub-title {
        font-size: 20px;
        padding-top: 18px;
        .time {
          font-size: 28px;
          padding: 0 3px;
          background: linear-gradient(329deg, #00D5FF 0%, #2A65FF 22%, #266FFF 77%, #00D5FF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-emphasis-color: transparent;
        }
      }
      .sub-desc {
        padding-top: 12px;
        font-size: 13px;
        font-weight: normal;
        line-height: 100%;
        text-align: center;
        letter-spacing: 0px;
        color: rgba(0, 0, 0, 0.9);
        .num {
          border-radius: 4px;
          padding: 1px 5px;
          gap: 10px;
          background: rgba(255, 255, 255, 0.5);
          color: #2A55FF;
          margin: 0 4px;
        }
      }
    }
    .grab-now {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 410px;
      width: 315px;
      height: 204px;
      z-index: 1;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .log-container {
      position: absolute;
      top: 446px;
      width: 100%;
      margin: auto;
      height: 629px;
      background: linear-gradient(180deg, rgba(159, 211, 255, 0) 0%, #C4DCFF 11%, rgba(255, 255, 255, 0) 100%);
      .log {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 115px;
        z-index: 2;
        width: 90%;
        text-align: center;
        opacity: 1;
        background-image: url('https://images-cloud.qboson.com/miniProgram/log-header.png');
        background-size: 100%;
        background-repeat: no-repeat;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.95);
        padding: 7px 0 35px 0;
      }
      .log-body {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 33px;
        width: 100%;
        height: 334px;
        border-radius: 20px;
        opacity: 1;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 100%);
        box-sizing: border-box;
        border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 2%, rgba(255, 255, 255, 0.8) 39%, rgba(255, 255, 255, 0.2) 100%) 1;
        backdrop-filter: blur(30px);
        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 11px;
          font-weight: normal;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.4);
          padding: 20px 20px 16px 20px
        }
        .items {
          width: 100%;
          height: calc(100% - 47px);
          overflow: auto;
          .item {
            width: 88%;
            margin: auto;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            font-weight: normal;
            line-height: 100%;
            color: rgba(0, 0, 0, 0.9);
            padding-bottom: 12px;
            border-bottom: 1px solid #DEDEDE;

            &:last-child {
              border-bottom: none;
            }
          }
          .bottom-text {
            text-align: center;
            font-size: 11px;
            line-height: 100%;
            color: rgba(0, 0, 0, 0.4);
            padding-bottom: 16px;
          }
        }
      }
    }
    .rules {
      width: 90%;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      font-size: 12px;
      font-weight: normal;
      line-height: 150%;
      letter-spacing: 0px;
      color: #9E9E9E;
    }
  }
}
</style>
